<template>
  <el-dialog title="添加经纪" :visible="isShowDialog" @close="btnCancel">
    <el-form
      ref="addAgentForm"
      :model="agentForm"
      :rules="rules"
    >
      <el-form-item
        label="名称"
        prop="name"
      >
        <el-input v-model="agentForm.name" />
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="agentForm.email" />
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input v-model="agentForm.phone" />
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="agentForm.address" />
      </el-form-item>
      <el-form-item label="描述" prop="desc">
        <el-input v-model="agentForm.desc" type="textarea" />
      </el-form-item>
      <!-- 图片上传组件 -->
      <el-form-item label="图片">
        <imageUpload ref="image" />
      </el-form-item>
      <el-row>
        <el-button type="primary" @click="btnOk">确认</el-button>
        <el-button @click="btnCancel">取消</el-button>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
import imageUpload from './ImageUpload.vue'
import { addAgent, updateAgent, getAgent } from '@/api/agent' // 新增接口
export default {
  components: { imageUpload },
  props: {
    isShowDialog: {
      type: Boolean,
      default: false
    },
    searchId: { default: 0,
      type: Number },
    searchAgent: {
      default: () => {
        return {}
      },
      type: Object }
  },
  data() {
    return {
      agentForm: {
        name: '',
        email: '',
        phone: '',
        address: '',
        desc: '',
        image: ''
      },
      rules: {
        name: [
          { required: true, message: '姓名不能为空', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '邮箱不能为空', trigger: 'blur' }
        ],
        phone: [{ required: true, message: '电话号码不能为空', trigger: 'blur' }, { pattern: /^1[3-9][0-9]{9}$/, message: '请输入正确的手机号', trigger: 'blur' }],
        address: [{ required: true, message: '地址不能为空', trigger: 'blur' }],
        desc: [{ required: true, message: '地址不能为空', trigger: 'blur' }]

      }
    }
  },
  methods: {
    // 取消新增经纪弹窗
    btnCancel() {
      // 清除表单校验
      this.$refs.addAgentForm.resetFields()
      this.$refs.image.fileList = []
      this.agentForm.id = ''
      this.$emit('update:isShowDialog', false)
    },
    // 判断是否有搜索事件触发
    async searchEvent() {
      if (this.searchId === 1) {
        console.log(666)
        console.log(44, this.searchAgent)
        // 如果有搜索，将页码和搜索出来的信息传给后台
        console.log('测试', this.searchAgent.name_contains)
        const res = await getAgent({ name_contains: this.searchAgent.name_contains, ...this.configPage })
        console.log('搜索', res)
        // 数据重新渲染
        // this.agentList = res.data
        this.$emit('upData', res.data)
      } else {
        // 重新刷新页面
        await this.$emit('addAgentForm')
      }
    },
    // 点击确定新增经纪
    async btnOk() {
      // 进行表单校验
      await this.$refs.addAgentForm.validate()
      // console.log('测试', this.agentForm.id)
      // 判断是编辑操作还是新增操作
      if (this.$refs.image.fileList.length === 0) {
        this.$message.warning('图片不能为空')
        return
      }
      this.agentForm.image = this.$refs.image.fileList[0].url
      if (!this.agentForm.id) {
        // 调用新增经纪接口
        await addAgent(this.agentForm)
        this.searchEvent()
      } else {
        await updateAgent(this.agentForm)
        // 判断是否是搜索里面的数据
        this.searchEvent()
        // await this.$confirm('是否确认修改')
        // 如果是有id
      }
      // 当点击确定的时候，上传的图片是否为空的判断

      // 提示用户
      this.$message.success('操作成功')

      // 关闭弹窗
      this.$emit('update:isShowDialog', false)
      // 清空弹窗内容
    },
    uploadimg(image) {
      this.$refs.image.fileList = [{ url: image }]
    }
  }
}
</script>

<style>

</style>
